<template>
    <el-dialog :visible.sync="showDialogVisible" @close="handleClose" width="80%" class="dialog">
      <template slot="title">
        <span style="color: rgba(52, 69, 99, 1); font-size: 18px;font-weight: bold; margin-left: 5px;margin-top: 34px;">
          入库单详情
          <br/><br/>
          <hr/>
        </span>
      </template>
  
      <div class="dialog-content">
        <el-form :model="showForm">
          <el-form-item label="入库单编号">
            <el-input v-model="showForm.stockSn" disabled style="width: 40%;"></el-input>
          </el-form-item>
          <el-form-item label="入库商品"></el-form-item>
          <div class="productTable">
            <el-tag>
              {{ showForm.commodityName }}
            </el-tag>
            <el-table :data="[showForm]" border style="width: 100%;">
              <el-table-column v-for="(item,index) in tableColumns" :key="index" :label="item.key" :prop="item.value"
                min-width="100">
                {{ item.value }}
              </el-table-column>
              <el-table-column label="单位" min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.unit  }}
                </template>
              </el-table-column>
              <el-table-column label="单价" min-width="100">
                <template slot-scope="scope">
                    ￥ {{ scope.row.price }}
                </template>
              </el-table-column>
              <el-table-column label="数量" min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.stockNumber }}
                </template>
              </el-table-column>
              <el-table-column label="金额" min-width="100">
                <template slot-scope="scope">
                    ￥ {{ scope.row.money }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </template>
  
  <script>
  export default {
    props:{
      visible:{
        type: Boolean,
        default: false
      },
      rowData:{
        type: Object,
        default: () =>({})
      }
    },
    data(){
      return{
        showDialogVisible: false,
        showForm:{
          stockSn: '',
          commodityName: '',
          unit: '',
          price: 0,
          stockNumber: 0,
          money: 0,
          spData: []
        },
      }
    },
    watch:{
      visible(val){
        this.showDialogVisible = val
      },
      rowData:{
        handler(Value){
          this.showForm = {...Value}
        },
        deep: true,
        immediate: true
      }
    },
    methods:{
      handleClose(){
        this.showDialogVisible = false
        this.$emit('update:visible', false)
      }
    },
    computed:{
      tableColumns(){
        console.log(this.showForm.spData)
        console.log(JSON.parse(this.showForm.spData))
        return JSON.parse(this.showForm.spData)
      }
    }
  }
  </script>
  
  <style scoped>
  .dialog {
    max-height: 100vh !important;
    overflow-y: hidden;
    left: 15%;
  }
  
  .dialog-content {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    height: 480px;
  }
  
  
  .el-icon-search {
    margin-top: 14px;
    width: 15px;
    margin-left: 6px;
  }
  
  .el-pagination {
    float: right;
  }
  
  .dialog-footer {
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 10px 20px;
    border-top: 1px solid #ebeef5;
  }
  
  .footer-button {
    font-size: 14px;
    height: 38px;
    width: 150px;
    margin-right: 8px;
  }
  
  .confirm-button {
    background-color: rgba(90, 52, 179, 1);
    color: white;
  }
  
  .productTable {
    margin-top: 10px;
  }
  
  .el-table .el-table--fit .el-table--border .el-table--enable-row-hover {
    background-color: #ebeef5;
  
  }
  </style>
  